<template>
  <div class="select-products">
    <header>
      <p>选择商品</p>
      <div class="action-wrap">
        <!-- <el-input
          v-model="searchkey"
          style="width: 360px"
          placeholder="输入商品名称、商品id、商品分类都可快速找到"
          :suffix-icon="Search"
          @keyup.enter="getListFun"
        /> -->
        <el-input
          class="jzt-select-input"
          v-model="searchkey"
          clearable
          style="width: 360px"
          @keyup.enter="getListFun"
          @clear="
            () => {
              searchType = null;
              getListFun();
            }
          "
          :disabled="!searchType"
          placeholder="请输入"
        >
          <template #prepend>
            <el-select v-model="searchType" :placeholder="'请选择'" style="width: 100px">
              <el-option v-for="_item in options" :key="_item.value" :label="_item.label" :value="_item.value" />
            </el-select>
          </template>
          <template #append>
            <!-- <el-button :icon="Search" /> -->
          </template>
        </el-input>
        <el-button class="ml32" type="info" plain @click="back"> 返回 </el-button>
      </div>
    </header>
    <div class="list" v-if="list.length > 0">
      <div v-for="(item, index) in list" :key="index" class="item">
        <img :src="item.mainPicUrl" alt="" />
        <div>
          <p class="text-over">{{ item.productName }}</p>
          <b class="price">¥ {{ item.factoryLowestPrice }}</b>
          <el-button type="primary" @click="openDialog(item)">添加到入库单</el-button>
        </div>
      </div>
    </div>
    <div v-else style="display: flex; justify-content: center; width: 100%">
      <el-empty description="暂无数据" />
    </div>

    <!-- 商品详情 -->
    <prodDetail :optionInfo="optionInfo" @close="close" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import prodDetail from "./prodDetail";
import { pageByKeyword, getShopDetail } from "@/apis/procure/entry";
import { useRoute, useRouter } from "vue-router";
import { getList } from "@/apis/stencil/fittings";
const route = useRoute();
const router = useRouter();

const factoryId = ref(route.query.factoryId);
const optionInfo = ref({ isShow: false, detail: {} });
const searchType = ref("");
const searchkey = ref("");
const list = ref([]);
const options = ref([
  { label: "商品id", value: "1" },
  { label: "商品名称", value: "2" },
  { label: "商品分类", value: "3" }
]);

const back = () => {
  // console.log(111, route.query._time);
  router.push({ path: "/procure/entry/add", query: { factoryId: factoryId.value, _time: route.query._time } });
};

onMounted(() => {
  getListFun();
});

const getListFun = () => {
  let params = {
    factoryId: factoryId.value,
    page: 1,
    size: 9999
  };
  if (searchType.value === "1") {
    params.productId = searchkey.value;
  } else if (searchType.value === "2") {
    params.productName = searchkey.value;
  } else if (searchType.value === "3") {
    params.categoryName = searchkey.value;
  } else {
    params = {
      factoryId: factoryId.value,
      page: 1,
      size: 9999
    };
  }
  pageByKeyword(params).then(res => {
    if (res.code === 200) {
      list.value = res.data.records;
    }
  });
};

const openDialog = item => {
  getShopDetail({ productId: item.productId }).then(res => {
    if (res.code === 200) {
      optionInfo.value.isShow = true;
      optionInfo.value.detail = res.data;
    }
  });
  // optionInfo.value.isShow = true;
  // optionInfo.value.detail = {
  //   collectId: "1809059022538588160",
  //   productId: "1809059021708115971",
  //   productAliasName: "yyx0705-111",
  //   businessId: "1805501818016428032",
  //   collectStatus: null,
  //   businessProductStatus: null,
  //   factoryId: null,
  //   isFactoryQa: null,
  //   isFactoryAddress: null,
  //   businessModelCode: null,
  //   businessGrade: null,
  //   isShowSale: 1,
  //   businessSaleNum: null,
  //   businessAddSaleNum: null,
  //   businessShowSaleNum: 0,
  //   collectTime: null,
  //   businessLowestPrice: "11.00",
  //   isSpecialPrice: null,
  //   skuNum: null,
  //   defaultOrder: null,
  //   fristCategoryId: null,
  //   mainPicUrl: "http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/1111720148139098.jpg",
  //   productName: "yyx0705-111",
  //   factoryLowestPrice: "0.00",
  //   sliderPicIds: "1720148138989",
  //   sliderPicUrlList: ["http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/1111720148139098.jpg"],
  //   sliderVedioId: "1720148142591",
  //   sliderVedioUrl: "http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/flower1720148142690.mp4",
  //   brandId: null,
  //   brandName: null,
  //   appearTime: "2024-07-02",
  //   contentId: "1809059022423838720",
  //   productPrizeInfoId: null,
  //   productPrizeInfo: null,
  //   delistType: 0,
  //   sourceType: 2,
  //   delistTime: null,
  //   listingTime: null,
  //   collectState: 0,
  //   categoryId: null,
  //   categoryName: null,
  //   content: "<p>111</p>",
  //   collectLabelIds: [],
  //   collectLabels: [],
  //   statsList: null,
  //   specificationList: [
  //     {
  //       specificationId: "1793904904789151744",
  //       specificationName: "颜色A",
  //       sort: null,
  //       speType: 2,
  //       sortOrder: 1,
  //       children: [
  //         {
  //           productSpecificationId: "1809500208243601409",
  //           productId: "1809059021708115971",
  //           specificationValId: null,
  //           specificationVal: "蓝色",
  //           statsText: "rgba(30, 144, 255, 1)",
  //           sort: null,
  //           skuId: "1809059021708115969",
  //           listingStatus: 1
  //         },
  //         {
  //           productSpecificationId: "1809500208243601409",
  //           productId: "1809059021708115971",
  //           specificationValId: null,
  //           specificationVal: "绿色",
  //           statsText: "rgba(144, 238, 144, 1)",
  //           sort: null,
  //           skuId: "1809059021703921664",
  //           listingStatus: 1
  //         }
  //       ]
  //     },
  //     {
  //       specificationId: "1793904205019860992",
  //       specificationName: "图片A",
  //       sort: null,
  //       speType: 3,
  //       sortOrder: 1,
  //       children: [
  //         {
  //           productSpecificationId: "1809500208243601412",
  //           productId: "1809059021708115971",
  //           specificationValId: null,
  //           specificationVal: "局部3",
  //           statsText: "http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/yz1720148195500.jpg",
  //           sort: null,
  //           skuId: "1809059021708115969",
  //           listingStatus: 1
  //         }
  //       ]
  //     },
  //     {
  //       specificationId: "1793904339367612416",
  //       specificationName: "图片B",
  //       sort: null,
  //       speType: 3,
  //       sortOrder: 1,
  //       children: [
  //         {
  //           productSpecificationId: "1809500208243601410",
  //           productId: "1809059021708115971",
  //           specificationValId: null,
  //           specificationVal: "局部6",
  //           statsText: "http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/upload1720148186447.png",
  //           sort: null,
  //           skuId: "1809059021708115969",
  //           listingStatus: 1
  //         },
  //         {
  //           productSpecificationId: "1809500208243601410",
  //           productId: "1809059021708115971",
  //           specificationValId: null,
  //           specificationVal: "局部5",
  //           statsText: "http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/4441720148238695.jpg",
  //           sort: null,
  //           skuId: "1809059021708115970",
  //           listingStatus: 1
  //         }
  //       ]
  //     }
  //   ],
  //   skuList: [
  //     {
  //       id: "1809059022555365376",
  //       skuId: "1809059021703921664",
  //       businessId: "1805501818016428032",
  //       productId: "1809059021708115971",
  //       productName: null,
  //       modeCode: null,
  //       code: "SKU2024070500040",
  //       properties:
  //         "[{\"specificationId\":1793904904789151744,\"specificationName\":\"颜色A\",\"specificationValId\":1793904904801734656,\"specificationVal\":\"绿色\",\"speType\":2,\"sort\":1},{\"specificationId\":1793904205019860992,\"specificationName\":\"图片A\",\"specificationValId\":1793904205032443905,\"specificationVal\":\"局部3\",\"speType\":3,\"sort\":3,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/yz1720148195500.jpg\"},{\"specificationId\":1793904339367612416,\"specificationName\":\"图片B\",\"specificationValId\":1793904339380195328,\"specificationVal\":\"局部6\",\"speType\":3,\"sort\":2,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/upload1720148186447.png\"}]",
  //       factoryPrice: "11.00",
  //       factoryPreferentialPrice: null,
  //       factoryRealPrice: "11.00",
  //       factoryStock: 1000,
  //       clinetPrice: "11.00",
  //       clinetPreferentialPrice: null,
  //       clinetRealPrice: "11.00",
  //       businessListingStatus: 1,
  //       listingStatus: null,
  //       productUnit: 1,
  //       skuStatus: 1,
  //       delTag: 0,
  //       wzSkuId: "说"
  //     },
  //     {
  //       id: "1809059022563753984",
  //       skuId: "1809059021708115968",
  //       businessId: "1805501818016428032",
  //       productId: "1809059021708115971",
  //       productName: null,
  //       modeCode: null,
  //       code: "SKU2024070500041",
  //       properties:
  //         "[{\"specificationId\":1793904904789151744,\"specificationName\":\"颜色A\",\"specificationValId\":1793904904801734656,\"specificationVal\":\"绿色\",\"speType\":2,\"sort\":1},{\"specificationId\":1793904205019860992,\"specificationName\":\"图片A\",\"specificationValId\":1793904205032443905,\"specificationVal\":\"局部3\",\"speType\":3,\"sort\":3,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/yz1720148195500.jpg\"},{\"specificationId\":1793904339367612416,\"specificationName\":\"图片B\",\"specificationValId\":1793904339376001024,\"specificationVal\":\"局部5\",\"speType\":3,\"sort\":2,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/4441720148238695.jpg\"}]",
  //       factoryPrice: null,
  //       factoryPreferentialPrice: "22.00",
  //       factoryRealPrice: "22.00",
  //       factoryStock: 1000,
  //       clinetPrice: null,
  //       clinetPreferentialPrice: "22.00",
  //       clinetRealPrice: "22.00",
  //       businessListingStatus: 1,
  //       listingStatus: null,
  //       productUnit: 1,
  //       skuStatus: 1,
  //       delTag: 0,
  //       wzSkuId: "识"
  //     },
  //     {
  //       id: "1809059022572142592",
  //       skuId: "1809059021708115969",
  //       businessId: "1805501818016428032",
  //       productId: "1809059021708115971",
  //       productName: null,
  //       modeCode: null,
  //       code: "SKU2024070500042",
  //       properties:
  //         "[{\"specificationId\":1793904904789151744,\"specificationName\":\"颜色A\",\"specificationValId\":1793904904797540352,\"specificationVal\":\"蓝色\",\"speType\":2,\"sort\":1},{\"specificationId\":1793904205019860992,\"specificationName\":\"图片A\",\"specificationValId\":1793904205032443905,\"specificationVal\":\"局部3\",\"speType\":3,\"sort\":3,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/yz1720148195500.jpg\"},{\"specificationId\":1793904339367612416,\"specificationName\":\"图片B\",\"specificationValId\":1793904339380195328,\"specificationVal\":\"局部6\",\"speType\":3,\"sort\":2,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/upload1720148186447.png\"}]",
  //       factoryPrice: "33.00",
  //       factoryPreferentialPrice: null,
  //       factoryRealPrice: "33.00",
  //       factoryStock: 1000,
  //       clinetPrice: "33.00",
  //       clinetPreferentialPrice: null,
  //       clinetRealPrice: "33.00",
  //       businessListingStatus: 1,
  //       listingStatus: null,
  //       productUnit: 1,
  //       skuStatus: 1,
  //       delTag: 0,
  //       wzSkuId: "是"
  //     },
  //     {
  //       id: "1809059022580531200",
  //       skuId: "1809059021708115970",
  //       businessId: "1805501818016428032",
  //       productId: "1809059021708115971",
  //       productName: null,
  //       modeCode: null,
  //       code: "SKU2024070500043",
  //       properties:
  //         "[{\"specificationId\":1793904904789151744,\"specificationName\":\"颜色A\",\"specificationValId\":1793904904797540352,\"specificationVal\":\"蓝色\",\"speType\":2,\"sort\":1},{\"specificationId\":1793904205019860992,\"specificationName\":\"图片A\",\"specificationValId\":1793904205032443905,\"specificationVal\":\"局部3\",\"speType\":3,\"sort\":3,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/yz1720148195500.jpg\"},{\"specificationId\":1793904339367612416,\"specificationName\":\"图片B\",\"specificationValId\":1793904339376001024,\"specificationVal\":\"局部5\",\"speType\":3,\"sort\":2,\"statsText\":\"http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-05/4441720148238695.jpg\"}]",
  //       factoryPrice: null,
  //       factoryPreferentialPrice: "44.00",
  //       factoryRealPrice: "44.00",
  //       factoryStock: 1000,
  //       clinetPrice: null,
  //       clinetPreferentialPrice: "44.00",
  //       clinetRealPrice: "44.00",
  //       businessListingStatus: 1,
  //       listingStatus: null,
  //       productUnit: 1,
  //       skuStatus: 1,
  //       delTag: 0,
  //       wzSkuId: "商"
  //     }
  //   ]
  // };
};

const close = () => {
  optionInfo.value.isShow = false;
};
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 !important;
}
.select-products {
  height: calc(100% - 20px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;
  header {
    background-color: white;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    margin: 0 -20px;
    border-radius: 10px 10px 0 0;
    p {
      color: #131414;
      font-size: 18px;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
      }
    }
    .action-wrap {
      display: flex;
    }
  }
  .list {
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    margin-top: 20px;
    .item {
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        height: 200px;
        width: 100%;
        border-radius: 10px;
      }
      & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        p {
          margin-bottom: 20px;
        }
        .price {
          margin-bottom: 24px;
        }
      }
    }
  }
}
</style>
